<!--
*@Author: QWP
*@Description: 个人设置
*@Date: 2024-07-26 19:38:18
-->
<template>
   <a-drawer
    v-bind="$attrs"
    title="个人设置"
    placement="right"
  >
  <div class="f-flex-column">
    <span class="f-margin-b8" style="font-size: 14px; font-weight: 600"> 字体大小 </span>
    <a-radio-group v-model:value="bodyFontSize" name="radioGroup"
      @change="fontSizeChange">
      <a-radio v-for="item in fontSizeOptions" :value="item.value" 
        :style="{ fontSize: item.value + 'px' }"
        class="f-margin-l10">
          {{ item.label }}
        </a-radio>
    </a-radio-group>
  </div>
  </a-drawer>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useHomeStore } from '@/store';
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia';

const homeStore = useHomeStore()
const { bodyFontSize } = storeToRefs(homeStore)

// 字体大小
const fontSizeOptions = [
  { label: '小', value: 14, set: 'setBodyFontSize' },
  { label: '中', value: 16, set: 'setBodyFontSize' },
  { label: '大', value: 18, set: 'setBodyFontSize' },
]
const fontSizeChange = (e) => {
  homeStore.setBodyFontSize(e.target.value)
}

</script>

<style lang='scss' scoped>
</style>